import { ref, onMounted } from 'vue'
import { toRaw } from '@vue/reactivity'
import ModeSettings from '@/components/activitySetting/ModeSettings.vue'
import GroupSettings from '@/components/activitySetting/GroupSettings.vue'
import SignInCompose from '@/components/activitySetting/SignInCompose.vue'

export default {
    components: {    
        ModeSettings,
        GroupSettings,
        SignInCompose
    },
    setup() {
        // 表单数据
        const formData = ref({
            mode: 'sign',
            handSign: true,
            photoCapture: false,
            photoScale: { width: 400, height: 300 },
        })

        const acid = ref('0')

        // 分组表单数据
        const groupFormData = ref({
            groupSwitch: false,
            groups: []
        })

        // 获取子组件引用
        const modeSettings = ref(null)
        const groupSettings = ref(null)
        const signInCompose = ref(null)

        // 保存设置
        const saveSetting = async () => {
            try {
                // 调用所有子组件的保存方法
                const results = await Promise.all([
                    modeSettings.value.save(),
                    groupSettings.value.save(),
                    signInCompose.value.save()
                ])

                // 合并所有保存结果
                const allSettings = Object.assign({}, ...results)
                console.log('所有设置:', toRaw(allSettings))
                // // 将 proxy 转换成 Object
                // console.log('mode设置:', toRaw(allSettings.modeSettings))
                // console.log('group设置:', toRaw(allSettings.groupSettings))
                // console.log('signInCompose设置:', toRaw(allSettings.signInCompose))
                // 另一种转换方式 将 proxy 转换成 Object
                console.log('所有设置:', JSON.parse(JSON.stringify(allSettings)));

                // 这里可以添加统一保存逻辑
                // 例如调用API保存所有设置
            } catch (error) {
                console.error('保存设置时出错:', error)
            }
        }

        return {
            acid,
            formData,
            groupFormData,
            modeSettings,
            groupSettings,
            signInCompose,        
            saveSetting
        }
    }
}